<template>
	<view class="container" :class="skinStyle">
		<view v-if="!nodataFlg">
			<view class="tui-cart-cell tui-mtop" v-for="(item, index) in shopcartList" :key="index">
					<view class="tui-goods-item-wrap" style="padding: 10px;">
						<checkbox-group @change="selectSingle(item)" class="tui-checkbox"><checkbox :value="item.id" :checked="item.checked" color="#fff" /></checkbox-group>
						<view class="tui-goods-item">
							<image src="../../../static/img/freeShipping.png" class="tui-goods-img imgMark" v-if="item.isSample !== 1 && item.isParcel === 1"></image>
							<image src="../../../static/img/gift.png" class="tui-goods-img imgMark" v-if="item.isSample === 1"></image>
							<image :src="imgSrc + item.productThumbnailImageUrl" class="tui-goods-img" @tap="detail(item)" />
							<view class="tui-goods-info">
								<view class="tui-goods-title">{{ item.productName }}</view>
								<view class="tui-goods-model" >
									<view class="tui-model-text">{{ item.specificationName }}</view>
								</view>
								<view class="tui-price-box">
									<view class="tui-goods-price">￥{{ item.productPrice }}</view>
									<view class="tui-scale">
										<tui-numberbox
											:value="item.productsCount"
											:height="38"
											:width="70"
											:min="1"
											:max="item.productsCount"
											:index="index"
											@change="changeNum"
										></tui-numberbox>
									</view>
								</view>
							</view>
						</view>
					</view>
			</view>
			<view class="tui-safe-area"></view>
			<view class="tui-tabbar tabbar-category editGoodsTabbar" v-if="shopcartList.length > 0">
				<view class="tui-checkAll">
					<checkbox-group @tap="selectAll" class="check-group">
						<label class="tui-checkbox">
							<checkbox value="all" :checked="allChecked" color="#fff"></checkbox>
							<text class="tui-checkbox-pl">全选</text>
						</label>
					</checkbox-group>
				</view>
				<view class="category-btn">
					<!-- <view v-if="!isEdit" @click="btnPay">去结算(0)</view>
						<view v-else>删除</view> -->
					<tui-button width="200rpx" height="70rpx" :size="30" type="primary" shape="circle" v-if="!isEdit" @tap="btnPay">确定</tui-button>
				</view>
			</view>
		</view>
		<!-- <view class="nodata-wrap" v-if="nodataFlg" :style="{ height: height + 'px' }">
			<image class="img" src="../../static/img/img_nodata.png" mode=""></image>
			<text class="text">您还没有加购任何商品~</text> 
			
		</view> -->
		<mix-empty v-if="nodataFlg" :type="'default'" :backgroundColor="'#fff'"></mix-empty>
		<loading v-if="isLoading"></loading>
		<tui-modal></tui-modal>

	</view>
</template>
<script>
import baseComponent from '@/components/baseComponent/baseComponent';
import footBar from '@/components/footbar/footbar';
import mixin from '@/utils/mixin.js';
import tuiSwipeAction from '@/components/swipe-action/swipe-action';
import tuiButton from '@/components/button/button';
import tuiNumberbox from '@/components/numberbox/numberbox';
import tuiDivider from '@/components/divider/divider';
import tuiLoadmore from '@/components/loadmore/loadmore';
import mixEmpty from '@/components/mix-empty/mix-empty.vue';
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
export default {
	mixins: [mixin, MescrollMixin],
	components: {
		baseComponent,
		footBar,
		tuiSwipeAction,
		tuiButton,
		tuiNumberbox,
		tuiDivider,
		tuiLoadmore,
		mixEmpty
	},

	data() {
		return {
			imgSrc: this.$store.state.imgUrl,
			isLoading:false,
			selectedIndex: 2,
			shopcartList: [],
			pageId: '',
			nodataFlg: false,
			number: 0,
			isEdit: false,
			productCount: 0,
			upOption: {
				noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				textNoMore: '-- 无更多信息 --'
			},
			allChecked: false,
			totalPrice: 0.0,
			invalid: [],
			actions: [
				{
					name: '删除',
					color: '#fff',
					fontsize: 30, //单位rpx
					width: 70, //单位px
					background: '#FD3B31'
				}
			],
			item: '',
			orderId: '',
			typeIndex:'',
		};
	},
	computed: {},
	onLoad(options) {
		// #ifdef H5
		   this.$wechat.noShare();
		// #endif
		this.item = JSON.parse(options.item);
		this.orderId = options.orderId;
		this.typeIndex = options.type;
	},
	onShow(){
		this.getCartList();
	},
	methods: {
		handlerButton(e) {
			const id = {
				id: e.item.id
			};
			console.log(e);
		},
		// 结算
		btnPay() {
			var goodsList = [];
			this.shopcartList.forEach((item, index) => {
				if (item.checked) {
					goodsList.push(item);
				}
			});
			if (goodsList.length == 0) {
				uni.showToast({
					title: '您还没有选择商品',
					icon: 'none'
				});
				return;
			}
			this.item.productInfo=goodsList;
			const StrItem = JSON.stringify(this.item);
			uni.navigateTo({
				url: './returnDetail?item='+StrItem+'&type='+this.typeIndex+'&listFlag=1'
			});
		},

		getCartList() {
			this.isLoading=true;
			const params = {
				orderId: this.orderId
			};
			this.$http.getOrderDetail(params).then(res => {
				if (res.status == 0) {
					this.shopcartList = res.data.productInfo;
				}
				this.isLoading=false;
			});
		},
		// 单个商品的选择
		selectSingle(item) {
			item.checked = !item.checked;
			if (!item.checked) {
				this.allChecked = false;
			} else {
				// 判断每一个商品是否是被选择的状态
				const cartList = this.shopcartList.every(item => {
					return item.checked === true;
				});
				if (cartList) {
					this.allChecked = true;
				} else {
					this.allChecked = false;
				}
			}
			var num = 0;
			this.shopcartList.forEach((item, index) => {
				if (item.checked) {
					num++;
				}
			});
			this.number = num;
		},
		//全选、全不选
		selectAll() {
			this.allChecked = !this.allChecked;
			if (this.allChecked) {
				this.shopcartList.map(item => {
					item.checked = true;
				});
			} else {
				this.shopcartList.map(item => {
					item.checked = false;
				});
			}
			var num = 0;
			this.shopcartList.forEach((item, index) => {
				if (item.checked) {
					num++;
				}
			});
			this.number = num;
		},
	}
};
</script>

<style lang="scss">
.editGoodsTabbar{
	bottom: 0px !important;
}
.imgMark {
	position: absolute;
	width: 100rpx !important;
	height: 100rpx !important;
	top: 0px;
	left: 12rpx;
	z-index: 99999;
}

.container {
	width: 100%;
	height: 100%;
}
/deep/ .uni-scroll-view::-webkit-scrollbar {
	/* 隐藏滚动条，但依旧具备可以滚动的功能 */
	display: none;
}
.nodata-wrap {
	width: 100%;
	height: 100%;
	background: #fff;
	.img {
		width: 300rpx;
		height: 300rpx;
		margin: 15% auto 50rpx auto;
		display: block;
		img {
			width: 100%;
			opacity: 0.5;
		}
	}
	.text {
		display: block;
		text-align: center;
		color: #ccc;
	}
}
// /deep/ uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked:before{
// 	color:#fff;
// }
// /deep/ uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked:before{
// 	font-size: 32rpx;
// 	color:$themeColor;
// }
// /deep/ uni-checkbox.gray-checkbox .uni-checkbox-input{
// 	background:$borderColor;
// }
.tui-mtop {
	margin-top: 20rpx;
}

.tui-edit-goods {
	width: 100%;
	border-radius: 12rpx;
	overflow: hidden;
	padding: 24rpx 30rpx 0 30rpx;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #333;
	font-size: 24rpx;
}

.tui-goods-num {
	font-weight: bold;
	//color: $themeColor;
}

.tui-cart-cell {
	width: 100%;
	background: #ffffff;
	overflow: hidden;
}
.swipe-action {
	.tui-swipeout-item {
		padding: 30rpx 0;
	}
}
.tui-goods-item-wrap {
	padding: 0 30rpx;
	display: flex;

	.tui-checkbox {
		width: 55rpx;
		display: flex;
		align-items: center;
		float: left;
		margin-right: 10rpx;
	}
	.tui-goods-item {
		flex: 1;
		// width:calc(100%-110rpx);
		display: flex;
		box-sizing: border-box;
	}
}

.tui-goods-img {
	width: 220rpx;
	height: 220rpx !important;
	border-radius: 12rpx;
	flex-shrink: 0;
	display: block;
}

.tui-goods-info {
	flex: 1;
	width: 100%;
	padding-left: 20rpx;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	box-sizing: border-box;
	overflow: hidden;
}

.tui-goods-title {
	white-space: normal;
	word-break: break-all;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-size: 26rpx;
	color: #333;
}

.tui-goods-model {
	max-width: 100%;
	color: #333;
	background: #f5f5f5;
	border-radius: 40rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 16rpx;
	box-sizing: border-box;
}

.tui-model-text {
	max-width: 100%;
	transform: scale(0.9);
	transform-origin: 0 center;
	font-size: 26rpx;
	line-height: 32rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tui-price-box {
	width: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}

.tui-goods-price {
	font-size: 34rpx;
	font-weight: 500;
	color: $red;
}

.tui-scale {
	transform-origin: 100% 100%;
}

.tui-activity {
	font-size: 28rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx 20rpx 30rpx;
	box-sizing: border-box;
	height: 110rpx;
}

.tui-buy {
	display: flex;
	align-items: center;
}

.tui-bold {
	font-weight: bold;
}

/*猜你喜欢*/
.tui-youlike {
	padding-left: 12rpx;
}

.tui-product-list {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	flex-wrap: wrap;
	box-sizing: border-box;
}

.tui-product-container {
	flex: 1;
	margin-right: 2%;
}

.tui-product-container:last-child {
	margin-right: 0;
}

.tui-pro-item {
	width: 100%;
	margin-bottom: 4%;
	background: #fff;
	box-sizing: border-box;
	border-radius: 12rpx;
	overflow: hidden;
}

.tui-pro-img {
	width: 100%;
	display: block;
}

.tui-pro-content {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-sizing: border-box;
	padding: 20rpx;
}

.tui-pro-tit {
	color: #2e2e2e;
	font-size: 26rpx;
	word-break: break-all;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.tui-pro-price {
	padding-top: 18rpx;
}

.tui-factory-price {
	font-size: 24rpx;
	color: #a0a0a0;
	text-decoration: line-through;
	padding-left: 12rpx;
}

.tui-pro-pay {
	padding-top: 10rpx;
	font-size: 24rpx;
	color: #656565;
}

.tabbar-category {
	bottom: calc(constant(safe-area-inset-bottom) + 98rpx); // ios底部安全距离-bottom
	bottom: calc(env(safe-area-inset-bottom) + 98rpx);
	padding-bottom: 0rpx;
}
.tui-safe-area {
	height: 1rpx;
	padding-bottom: calc(env(safe-area-inset-bottom) + 200rpx);
}

.tui-invalid-pr {
	// width: 75rpx !important;
}
.tui-invalid-text {
	width: 60rpx;
	// margin-right: 4rpx;
	text-align: center;
	font-size: 24rpx;
	color: #fff;
	background: rgba(0, 0, 0, 0.3);
	transform: scale(0.8);
	transform-origin: center center;
	border-radius: 4rpx;
	flex-shrink: 0;
}
.tui-gray {
	color: #b2b2b2 !important;
}
.tui-flex-center {
	// align-items: center !important;
	margin-bottom: 70rpx;
}
.tui-goods-invalid {
	color: #555;
	font-size: 24rpx;
}
</style>
